import {BasePlugin} from '../base/base-plugin.js';
import {IconStyleManager,IconLayoutManager} from './icon-managers.js';

(function () {
    const SELECTOR = 'widget-icon-preview-area';

    class IconPlugin extends BasePlugin {
        static DEFAULT_CONFIG = {
            ...BasePlugin.DEFAULT_CONFIG,
            SELECTOR: SELECTOR,
            EXTENSION_NAME: "icon",
            CONSTANTS: {
                CLASS_PREFIX: "icon-preview",
                PREVIEW_DYNAMIC_CONTAINER: "icon-dynamic-container",
                PREVIEW_WRAPPER_CONTAINER: "icon-wrapper",
                PREVIEW_CONTAINER: "icon-circle",
                PREVIEW_LOGO: "icon-logo",
                PREVIEW_TITLE: "icon-title",
                CONTROLS_CONFIG: {
                    logobg: {
                        widget: 'ColorPicker',
                        event: ["change", "input"],
                        default: '#41bf46'
                    },
                    logocolor: {
                        widget: 'ColorPicker',
                        event: ["change", "input"],
                        default: '#ffffff'
                    },
                    logobrand: {widget: 'Text', event: ["change"], default: '7'},
                    text: {widget: 'Text', event: ["change"], default: ''},
                    titlecolor: {
                        widget: 'ColorPicker',
                        event: ["change", "input"],
                        default: '#48566b'
                    },
                    title: {widget: 'Text', event: ["change"], default: '你好，世界！'},
                    link: {widget: 'Text', event: ["change"], default: ''},
                    size: {widget: 'Dropdown', event: ["change"], default: 'medium'},
                    tooltip: {widget: 'Textarea', event: ["change"], default: ''},
                    tooltippos: {
                        widget: 'Dropdown',
                        event: ["change"],
                        default: 'bottom'
                    },
                    logosize: {
                        widget: 'IntSlider',
                        event: ["change"],
                        default: 1,
                        scaleFactor: 1,
                        symbol: 'rem',
                        toFixed: 1
                    },
                    radius: {
                        widget: 'IntSlider',
                        event: ["change"],
                        default: 50,
                        scaleFactor: 1,
                        symbol: '%',
                        toFixed: 1
                    },
                    shadow: {widget: 'Checkbox', event: ["change"], default: false},
                    animation: {widget: 'Dropdown', event: ["change"], default: 'none'},
                },
            },
            MANAGERS: {
                ...BasePlugin.DEFAULT_CONFIG.MANAGERS,
                style: IconStyleManager,
                layout: IconLayoutManager,
            }
        };

        /**
         * 更新图标链接，如果有链接值，则包装为可点击链接
         */
        updateIconLink(linkUrl) {
            const {SELECTOR} = this.config;
            const {
                PREVIEW_WRAPPER_CONTAINER,
                PREVIEW_DYNAMIC_CONTAINER
            } = this.constants;
            const $iconWrapper = $(`.${SELECTOR} .${PREVIEW_WRAPPER_CONTAINER}`);
            const containerClass = `${PREVIEW_DYNAMIC_CONTAINER} text-decoration-none`;

             // 清除现有包装（unwrap - 移除父元素，保留自身）
            $iconWrapper.unwrap();

            // 根据链接状态重新包装
            if (linkUrl) {
                // wrap - 为元素添加父级包装
                $iconWrapper.wrap(
                    `<a href="${encodeURI(linkUrl)}" 
                    class="${containerClass}" 
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="External link"></a>`
                );
            } else {
                $iconWrapper.wrap(`<div class="${containerClass}"></div>`);
            }
        }
    }

    function initPreview() {
        const checkReady = setInterval(() => {
            if ($(`.${SELECTOR}`).length > 0) {
                clearInterval(checkReady);
                new IconPlugin();
            }
        }, 100);
    }

    if (document.readyState === 'complete') {
        initPreview();
    } else {
        document.addEventListener('DOMContentLoaded', initPreview);
    }
})()